<template>
  <div>
    <div class="w-form-header">
      <div class="title-box" style="flex: 1;">
        <span class="title">首辦单</span>
      </div>
      <div class="title-box" style="margin-left: auto">
        <span class="version">
          版本: {{ detailFormData.version || "暂无" }}</span
        >
        <span class="status">{{ detailFormData.status }}</span>

        <span
          style="font-size: 16px; color: #999; margin-left: 20px"
          >{{ detailFormData.printStatus }}</span
        >
      </div>
    </div>
    <div class="gva-form-box admin-content">
      <div class="w-form-box">
        <div class="list-header">基本信息</div>
      </div>
      <van-cell-group>
        <van-cell 
          v-for="(item, key) in detailFormColumns"
          :title="item.label" 
          :value="detailFormData[item.prop] ? (item.formatter ? item.formatter(detailFormData[item.prop], detailFormData) : detailFormData[item.prop]) : '暂无'" 
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script setup>
import {
  findFirstOrderProcessing,
} from "@/api/plmFirstOrderProcessing";
// 全量引入格式化工具 请按需保留
import { formatDate } from "@/utils/format";
import { useI18n } from "vue-i18n";
const { t: il8n } = useI18n();
defineOptions({
  name: "FirstOrderProcessingDetail",
});

// 自动获取字典
import { useRoute, useRouter } from "vue-router";
import { ref, reactive, onMounted, watchEffect, unref } from "vue";
const router = useRouter();
const route = useRoute();

const detailFormColumns = ref([]);

const detailFormData = ref({
  firstOrderNum: "",
  customerDemandDate: new Date(),
  cumstomerNum: "",
  customerStyleNum: "",
  updateUser: "",
  updateTime: new Date(),
});


watchEffect(() => {
  //   基本资料 columns
  const newDetailFormColumns = [
    {
      label: il8n("firstOrderNum.label"),
      prop: "firstOrderNum",
    },
    {
      label: il8n("cumstomerNum.label"),
      prop: "cumstomerNum",
    },
    {
      label: il8n("sheetArcBend.label"),
      prop: "sheetArcBend",
    },
    {
      label: "完成时间",
      prop: "finishTime",
      needformatter: true,
      formatter: (finishTime) => formatDate(finishTime),
    },
    {
      label: il8n("styleNum.label"),
      prop: "styleNum",
    },
    {
      label: il8n("customerStyleNum.label"),
      prop: "customerStyleNum",
    },
    {
      label: il8n("localTiltAngle.label"),
      prop: "localTiltAngle",
    },
    {
      label: il8n("createdAt.label"),
      prop: "CreatedAt",
      needformatter: true,
      formatter: (CreatedAt) => formatDate(CreatedAt),
    },
    {
      label: il8n("localStyleNum.label"),
      prop: "localStyleNum",
    },
    {
      label: il8n("customerBrand.label"),
      prop: "customerBrand",
    },
    {
      label: il8n("customerTiltAngle.label"),
      prop: "customerTiltAngle",
    },
    {
      label: "创建人",
      prop: "createUser",
    },
    {
      label: il8n("sbuNum.label"),
      prop: "sbuNum",
    },
    {
      label: il8n("series.label"),
      prop: "series",
    },
    {
      label: il8n("glassType.label"),
      prop: "glassType",
    },
    {
      label: il8n("updatedAt.label"),
      prop: "UpdatedAt",
      needformatter: true,
      formatter: (UpdatedAt) => formatDate(UpdatedAt),
    },
    {
      label: il8n("customerDemandDate.label"),
      prop: "customerDemandDate",
      needformatter: true,
      formatter: (customerDemandDate) => formatDate(customerDemandDate),
    },
    {
      label: "生产地点",
      prop: "transferOrder",
    },
    {
      label: il8n("spleenTypeModel.label"),
      prop: "spleenTypeModel",
    },
    {
      label: il8n("updateUser.label"),
      prop: "updateUser",
    },
    {
      label: "制作部門",
      prop: "productionDepartment",
    },
    {
      label: "测试项目备注",
      prop: "testProjectNote",
    },
    {
      label: "首办单备注",
      prop: "firstOrderNote",
    },
    // {
    //     label: il8n("ptlm_status.label"),
    //     prop: "status",
    // },
  ];
  detailFormColumns.value = newDetailFormColumns;
  
});
const dict = ref({});
onMounted(async () => {
  // 获取词典
  // dict.value = await useDict(
  //   "contentCate",
  //   "reasonCate",
  //   "transferOrder",
  //   "productionDepartment"
  // );
  // contentCate.value = dict.value.contentCate;
  // reasonCate.value = dict.value.reasonCate;
  // 获取审批流列表
  // getWorkFlowData()
  // 是否首次更新
  getFindFirstOrderProcessingDetail();

});

async function getFindFirstOrderProcessingDetail() {
  const {
    query: { firstOrderNum },
  } = route;
  const res = await findFirstOrderProcessing({ firstOrderNum });
  if (res.code === 0) {
    const {
      data: {
        refirstOrderProcessing,
      },
    } = res;
    detailFormData.value = refirstOrderProcessing;
    detailFormData.value.orderTo = refirstOrderProcessing.orderTo || {};
    console.log('dict.value====>', dict.value);
    console.log('productionDepartment======>', refirstOrderProcessing);
    // productionDepartment.value = dict.value.productionDepartment.filter((item) => item.value == refirstOrderProcessing.productionDepartment)[0].label
    
    
    // getBtn(refirstOrderProcessing.status);
  }
}

</script>

<style lang="scss" scoped>
@import url("@/style/common/common.scss");
.gva-form-box {
  :deep(.my-label) {
    width: 9%;
  }
  :deep(.my-content) {
    width: 16%;
  }
}

.title-box {
  display: flex;
  align-items: center;

  .title {
    font-size: 13px;
    color: rgba(173, 173, 173, 1);
  }
}

</style>
